import styles from './index.module.less';
import { Button } from 'antd';
import { AreaContainer } from '@hdtd/components/test';
import { EAreaContainerType } from '@/types/common/ctx-init';
import { registerAreaContainerPresets } from '@hdtd/components/test';
import { useEffect, useState } from 'react';

registerAreaContainerPresets(EAreaContainerType.Type1, {
  structure: {
    Header: ({ title, icon, showDetails }) => (
      <div>
        {icon}
        <span style={{ margin: '0 20px' }}>{title}</span>
        {showDetails ? <Button>操作</Button> : null}
      </div>
    ),
    Body: ({ children, count }) => {
      console.log('Body 更新了');
      useEffect(() => {
        return () => {
          console.log('Body 卸载了');
        };
      }, []);
      return (
        <div>
          附加内容：{count}
          {children}
        </div>
      );
    },
    Footer: ({ footer }) => <div>{footer} 附加尾巴</div>
  },
  props: {
    classNames: {
      root: 'root1',
      header: 'header1',
      body: 'body1',
      footer: 'footer1'
    },
    styles: {
      root: {
        border: '1px solid red'
      },
      header: {
        border: '1px solid green'
      },
      body: {
        border: '1px solid purple'
      },
      footer: {
        border: '1px solid pink'
      }
    }
  }
});

const ACTest = () => {
  const [count, setCount] = useState(1);
  const [count1, setCount1] = useState(1);
  useEffect(() => {
    return () => {
      console.log('卸载了');
    };
  }, []);
  return (
    <div className={styles['box-ac-test']}>
      <AreaContainer
        type={EAreaContainerType.Type1}
        // type={'default'}
        title="我是标题"
        count={count}
        footer={<Button onClick={() => setCount(count + 1)}>更新数据</Button>}
        icon="我是icon"
        showDetails
      >
        <div className={styles['area-content']}>我是内容</div>
      </AreaContainer>
      {/* <iframe
        width="330"
        height="86"
        style={{ border: 0, margin: 0 }}
        src="//music.163.com/outchain/player?type=2&id=2711834126&auto=1&height=66"
      /> */}
    </div>
  );
};

export default ACTest;
